<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>{$detail.title}</title>
</head>
<input type="hidden" value="{$detail.id|default=''}" id="id">
<body>
<script src="../../../../live/ezuikit.js"></script>
<script src="/static/js/jquery-2.1.1.js"></script>
<style>
    .live-ptz-title{
        display: none;
    }

    #video-container-audioControls-left div:nth-child(4),
    #video-container-audioControls-left div:nth-child(6),
    .mobile-ez-ptz-container{
        display: none!important;
    }
    body{
        /*overflow: hidden;*/
        margin:0px;
        padding:0px;
    }
    body{
        text-align: center;
        -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
        -webkit-user-select:none; /*webkit浏览器*/
        -khtml-user-select:none; /*早期浏览器*/
        -moz-user-select:none; /*火狐*/
        -ms-user-select:none;  /*IE10*/
        user-select:none;

    }
    .video{
        width:100%;
    }
    .zoom{
        display: inline-block;
        position: absolute;
        width:110px;
        right:0px;
        top:10px;
    }
    .button{
        width:30px;
        height:30px;
        line-height: 40px;
        display: inline-block;
    }
    #far{
        background:url("../../../../live/ico/far.png");
        background-size:100%;
        margin-left:20px;
    }
    #near{
        background:url("../../../../live/ico/near.png");
        background-size:100%;
    }
    .zxd_main{
        display: inline-block;
        position: relative;
    }
</style>

<div class="zxd_main">
    <div id="video-container" style="width:100%; height:auto;">
    </div>
    <div class="zoom" style="display: none">
        <div class='button' id="near"></div>
        <div class='button' id="far"></div>
    </div>
</div>
<script>
    function isMobile() {
        var userAgentInfo = navigator.userAgent;

        var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];

        var mobile_flag = false;

        //根据userAgent判断是否是手机
        for (var v = 0; v < mobileAgents.length; v++) {
            if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
                mobile_flag = true;
                break;
            }
        }

        var screen_width = window.screen.width;
        var screen_height = window.screen.height;

        //根据屏幕分辨率判断是否是手机
        if(screen_width < 500 && screen_height < 800){
            mobile_flag = true;
        }

        return mobile_flag;
    }
    var mobile = isMobile(); // true为PC端，false为手机端
    var width = $(window).width();

    if(width>1200){
        width = 1200;
    }


    if(mobile==false){
        var template = "pcLive";
    }else{
        var template = "pcLive";
    }

    console.log(width);
    console.log(template);

    var height = width*0.8;
    var playr = new EZUIKit.EZUIKitPlayer({
        id: 'video-container', // 视频容器ID
        accessToken: '{$token}',
        url: '{$detail.flvAddress}',
        template: template, // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        autoplay: true,
        // 视频上方头部控件
        header: ['capturePicture','save','zoom'],            // 如果templete参数不为simple,该字段将被覆盖
        // 视频下方底部控件
        footer: ['talk','broadcast','hd','fullScreen'],      // 如果template参数不为simple,该字段将被覆盖
        audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        plugin: ['talk','capturePicture','save','zoom'],                       // 加载插件，talk-对讲
        // openSoundCallBack: (data) => console.log("开启声音回调",data),
        // closeSoundCallBack: (data) => console.log("关闭声音回调",data),
        // startSaveCallBack: (data) => console.log("开始录像回调",data),
        // stopSaveCallBack: (data) => console.log("录像回调",data),
        // capturePictureCallBack: (data) => console.log("截图成功回调",data),
        // fullScreenCallBack: (data) => console.log("全屏回调",data),
        // getOSDTimeCallBack: (data) => console.log("获取OSDTime回调",data),
        // handleSuccess: (data) = function(){console.log("播放成功回调",data)},
        // handleError: (data) => console.log("播放失败回调",data),
        width:width,
        height:height,
    })
</script>
</body>

</html>